<!--表格组件-->
<template>
  <ul>
    <!--表头标题-->
    <li>
      <div  v-for="(item,index) in simpleTableData.title" :key="index">
        <p>{{item}}</p>
      </div>
    </li>
    <!--表体内容-->
    <li v-for="(item1,index) in simpleTableData.list" :key="index">
      
      <div v-for="(item,i) in item1" :key="i">
        <p v-if="typeof item === 'string' || typeof item === 'number'">{{item}}</p>
        <template v-else>
          <el-button  type="text" @click="item.callBack(item1, index)">{{item.handleTile ? item.handleTile : '查看详情'}}</el-button>
          <el-button type="text" @click="item.deductMarkCallBack(item1, index)">{{item.deductMark}}</el-button>
        </template>
      </div>
    </li>
  </ul>
</template>

<script>
    export default {
        name: "simpleTable",
      props:{
        simpleTableData:{
          type: Object,
          require: true
        }
      }
    }
</script>

<style lang="scss" scoped>
  ul {
    padding: 0;
    margin: 20px 0;

    li {
      &:hover{
        background-color: #f3f3f3;
      }
      list-style: none;
      display: flex;
      border-top: 1px solid #000;

      &:last-of-type {
        border-bottom: 1px solid #000;
      }

      > div {
        justify-content: center;
        text-align: center;
        border-left: 1px solid #000;

        &:last-of-type {
          border-right: 1px solid #000;
        }

        &:first-of-type {
          width: 35%;
        }

        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4),
        &:nth-of-type(5) {
          flex: 1;
        }
        >button{
          height: 87%;
        }
      }
    }
  }
</style>
